<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统中心</el-breadcrumb-item>
        <el-breadcrumb-item>工作人员管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
      <el-form ref="staffMember" :model="staffMember" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="真实姓名">
              <el-input v-model="staffMember.realName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="staffMember.staffMemberPhone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-select v-model="staffMember.specificPosition" placeholder="请选择活动区域">
                <el-option label="店长" value="1"></el-option>
                <el-option label="店员" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-button type="success"  plain @click="searchSomeStaffMember()">查询</el-button>
        </el-row>
      </el-form>

      <el-button  type="primary" plain @click="dialogVisible = true">添加管理人员</el-button>

      </el-card>
      <el-table
        border
        :data="staffMemberList"
        style="width: 100%">
        <el-table-column
          prop="code"
          label="店员编号"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="realName"
          label="真实姓名"
          width="145"
          align="center">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="姓名"
          width="135"
          align="center">
        </el-table-column>
        <el-table-column
          prop="staffMemberPhone"
          label="手机号"
          width="160"
          align="center">
        </el-table-column>
        <el-table-column
          prop="specificPosition"
          label="工作职位"
          width="130"
          align="center">
          <template slot-scope="scope">
            {{scope.row.specificPosition|specificPositionFit}}
          </template>
        </el-table-column>
        <el-table-column
          prop="hireDate"
          label="入职时间"
          width="170"
          align="center">
          <template slot-scope="scope">
            {{scope.row.hireDate|hireDateFit}}
          </template>
        </el-table-column>
        <el-table-column
          prop="deleted"
          label="状态"
          width="135"
          align="center">
          <template slot-scope="scope">
            {{scope.row.deleted|deletedFit}}
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          width="205"
          align="center">
          <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
          <template slot-scope="scope">
            <el-button type="success" v-if="scope.row.deleted==0" plain size="mini" @click="editById(scope.row)">修改</el-button>
            <el-button type="warning" v-if="scope.row.deleted==0" plain size="mini"  @click="delById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <el-dialog title="添加管理人员" :visible.sync="dialogVisible" width="1000" @close="clean">
          <el-form ref="form" :model="staffMemberForm" label-width="80px" :rules="rules">
            <el-row>
              <el-col :span="11">
            <el-form-item label="职员真实姓名" prop="realName">
              <el-input v-model="staffMemberForm.realName"></el-input>
            </el-form-item>
              </el-col>
              <el-col :span="11">
            <el-form-item label="职员姓名" prop="userName">
              <el-input v-model="staffMemberForm.userName"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            <el-col :span="11">
            <el-form-item label="职员手机号" prop="staffMemberPhone">
              <el-input v-model="staffMemberForm.staffMemberPhone"></el-input>
            </el-form-item>
            </el-col>
              <el-col :span="11">
            <el-form-item label="具体职位" prop="specificPosition">
              <el-select v-model="staffMemberForm.specificPosition" placeholder="具体职位">
                <el-option label="店员" value="2"></el-option>
                <el-option label="店长" value="1"></el-option>
              </el-select>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
            <el-form-item label="密码" prop="userPass">
              <el-input v-model="staffMemberForm.userPass"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
<!--            <el-form-item label="所属店铺">-->
<!--              <el-input v-model="staffMemberForm.shopCode"></el-input>-->

<!--            </el-form-item>-->

          </el-form>
          <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取 消</el-button>
                 <el-button type="primary" plain @click="addStaffMembers">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改管理人员" :visible.sync="dialogVisible2" width="1000" @close="clean">
          <el-form ref="staffMemberForm" :model="staffMemberForm" label-width="80px" :rules="rules" >
            <el-row>
              <el-col :span="11">
            <el-form-item label="职员真实姓名" prop="realName">
              <el-input v-model="staffMemberForm.realName"></el-input>
            </el-form-item>
              </el-col>
              <el-col :span="11">
            <el-form-item label="职员姓名" prop="userName">
              <el-input v-model="staffMemberForm.userName"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            <el-col :span="11">
            <el-form-item label="职员手机号" prop="staffMemberPhone">
              <el-input v-model="staffMemberForm.staffMemberPhone"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="11">
            <el-form-item label="具体职位"  prop="specificPosition">
              <el-select v-model="staffMemberForm.specificPosition" placeholder="具体职位">
                <el-option label="店长" :value="1"></el-option>
                <el-option label="店员" :value="2"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="11">
            <el-form-item label="密码" >
              <el-input v-model="staffMemberForm.userPass" disabled></el-input>
            </el-form-item>
            </el-col>
              <el-col :span="11">
                <el-form-item label="店员编号" >
                  <el-input v-model="staffMemberForm.code" disabled></el-input>
                </el-form-item>
              </el-col>
<!--            <el-form-item label="所属店铺">-->
<!--              <el-input v-model="staffMemberForm.shopCode"></el-input>-->

<!--            </el-form-item>-->
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
                <el-button plain @click="dialogVisible2=false">取 消</el-button>
                 <el-button type="primary"  plain @click="updateTeacher()">确 定</el-button>
            </span>
        </el-dialog>


      </div>
    </el-card>
  </div>
</template>

<script>
    import moment from 'moment'
    export default {

        name: "StaffMemberList",
        data(){
            return{
                staffMember:{
                    realName:'',
                    specificPosition:'',
                    staffMemberPhone:''
                },

                dialogVisible2:false,
                staffMemberForm:{},
                shoplist:[],
                dialogVisible:false,
                staffMemberList:[],
                page:{
                    currentPage:0,
                    pageSize:5
                },
                total:0,
                rules:{
                    realName:[
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    ],
                    userName:[
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                    ],
                    staffMemberPhone:[
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        {  min:11 ,max: 11, message: '手机号为11位', trigger: 'blur' }
                    ],
                    specificPosition:[
                        { required: true, message: '请选择职位', trigger: 'blur' },
                    ],
                    userPass:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        {  min:6 ,max: 6, message: '密码为6位数', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{

            //修改回显
            editById:function(row){
                this.dialogVisible2=true;
                this.staffMemberForm=row;
            },
            //修改信息
            updateTeacher:function(){
                this.$http.post('/staffMember/updateStaffMember?id='+this.staffMemberForm.id+
                    '&userName='+this.staffMemberForm.userName+
                    '&staffMemberPhone='+this.staffMemberForm.staffMemberPhone+
                    '&specificPosition='+this.staffMemberForm.specificPosition+
                    '&userPass='+this.staffMemberForm.userPass+
                    '&shopCode='+this.staffMemberForm.shopCode).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.dialogVisible2=false;
                    }else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    this.searchSomeStaffMember();
                })
            },

            clean:function(){
                this.staffMemberForm={};
              },
            //添加管理人员
            addStaffMembers:function () {

                this.$http.post('/staffMember/addStaffMember?realName='+this.staffMemberForm.realName+
                    '&userName='+this.staffMemberForm.userName+
                    '&staffMemberPhone='+this.staffMemberForm.staffMemberPhone+
                    '&specificPosition='+this.staffMemberForm.specificPosition+
                    '&userPass='+this.staffMemberForm.userPass+
                    '&shopCode=1'/*+this.staffMemberForm.shopCode*/).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.clean();
                        this.dialogVisible=false;
                    }else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    this.searchSomeStaffMember();
                })
            },


            //逻辑删除
            delById:function (id) {

                        this.$confirm('此操作将永久停用该用户, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$http.post('/staffMember/delStaffMember?id='+id).then((res)=>{
                            this.$message({
                                type: 'success',
                                message: '停用成功!'
                            });
                                this.searchSomeStaffMember();
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消停用'
                            });
                        });


                })
            },
            //工作人员列表
            searchStaffMember:function () {
                this.$http.get('/staffMember/getStaffMember').then((res)=>{
                    debugger
                    this.staffMemberList = res.data.result.staffMembers;
                })
            },

            //工作人员列表+分页+模糊
            searchSomeStaffMember:function () {

                console.info(this.staffMember)
                this.$http.post('/staffMember/getStaffMemberBySomething?currentPage='+this.page.currentPage+
                    '&pageSize='+this.page.pageSize,this.staffMember).then((res)=>{

                    this.staffMemberList = res.data.result.iPage.records;
                    this.total=res.data.result.iPage.total;
                })

            },
            //实现分页
            //每页记录数
            handleSizeChange:function(val){
                this.page.pageSize = val
                this.searchSomeStaffMember()
            },
            //当前页
            handleCurrentChange:function(val){
                this.page.currentPage = val
                this.searchSomeStaffMember()
            },
        },
        mounted() {
           // this.searchStaffMember();
            this.searchSomeStaffMember()
        },
        filters:{
            hireDateFit:function (val) {
                return moment(val).format("YYYY-MM-DD HH:mm:ss")
            },
            deletedFit:function (val) {
                if (val==0){
                    return "在职"
                }
                if (val==1){
                    return "离职"
                }
            },
            specificPositionFit:function (val) {
                if (val==1){
                    return "店长"
                }
                if (val==2){
                    return "店员"
                }
            }
        }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1280px;
  }
</style>
